<script setup>
import router from '@/router';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import LayoutNav from '../Layout/components/LayoutNav.vue';
import { ref } from 'vue';
import { launchCrowdFunding } from '@/api/crowdFunding'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';

const route = useRoute();
console.log(route.params.good_id)
const good_id = route.params.good_id
const product_good_name = route.params.good_name

// 用户申请的众筹信息
const productForm = ref({
  product_id: '',  // 产品ID
  good_id: good_id,  // 商品ID
  product_name: '',  // 众筹名称
  product_good_name: product_good_name,  // 商品名称
  product_price: '',  // 商品价格
  product_quantity: '',  // 商品数量
  product_target_quantity: '',  // 众筹目标数量
  product_description: '',  // 众筹描述
})

// 取消操作的函数
function cancel() {
  productForm.value = null
  // router.push('/crowdFunding')  // 跳转到众筹页面
  router.back();
}

// 提交表单的函数
function submitForm() {
  console.log(productForm.value)
  // 调用 launchCrowdFunding 函数，并将众筹表单数据传递进去
  launchCrowdFunding(productForm.value).then(res => {
    console.log(res.data)
    ElMessage.success('发起众筹成功，可自行前往个人中心查看')
    router.push('/')
  }).catch(err => {
    ElMessage.error('发起众筹失败，请重试')
    console.log(err)
  })
}

</script>

<template>
    <LayoutNav></LayoutNav>
    <header class='app-header'>
        <div class="container">
        <div class="logo">
            <RouterLink to="/">桃禧</RouterLink>
        </div>
        <div style="margin-top: 15px;margin-left: 20%;font: 2em sans-serif;">
            发起众筹
        </div>
        </div>
    </header> 

    <div class="zs">
        <div class="shenqing">
            <div class="renz">
                <div id="rz">
                <h1 style="padding-left: 40%;">众筹表单</h1>
                <hr>
                <el-form :model="productForm" label-width="100px">
                    <el-form-item label="众筹项目名称" placeholder="请输入众筹项目名称" style="width: 700px;">
                    <el-input v-model="productForm.product_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" style="width: 700px;">
                    <el-input v-model="productForm.product_good_name" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="众筹单价" style="width: 700px;">
                    <el-input v-model="productForm.product_price"></el-input>
                    </el-form-item>
                    <el-form-item label="众筹数量" style="width: 700px;">
                    <el-input v-model="productForm.product_quantity"></el-input>
                    </el-form-item>
                    <el-form-item label="目标数量" style="width: 700px;">
                    <el-input v-model="productForm.product_target_quantity"></el-input>
                    </el-form-item>
                    <el-form-item label="众筹描述" style="width: 700px;">
                    <!-- <el-input v-model="productForm.product_description"></el-input> -->
                    <textarea id="description" name="description" v-model="productForm.product_description" rows="10" cols="80" placeholder="在这里输入描述..."></textarea>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="cancel" @click="cancel">取消众筹</el-button>
                    <el-button type="primary" @click="submitForm">发起众筹</el-button>
                    </el-form-item>
                </el-form>
                </div>
            </div>
        </div>
    </div>

    <LayoutFooter></LayoutFooter>
</template>

<style scoped lang="scss">
.app-header {
  background: #ffffff;

  .container {
    display: flex;
    padding-left: 10%;
  }

  .logo {
    width: 60px;
    margin-top: -15px;

    a {
      display: block;
      height: 80px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }
}


.zs{
  width: 900px;
  display: flex;
  margin-left: 20%;
}

.shenqing{
  width: 800px;
  background-color: #ffebeb;
  margin: 10px;
  border-radius: 10px;
}
.renz{
  padding: 20px;
  font-family: Arial, sans-serif;
}
.image-preview{
  max-width: 200px;
  max-height: 200px;
}

  .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>